<template>
  <div class="searchContainer">
    <div class="header">
      <div class="searchBox">
        <i class="iconfont icon-sousuo"></i>
        <input class="search" type="text" :placeholder="defaultKeyword.keyword" v-model="searchKeyword" @input="collectKeyword" @keyup.enter="searchGoods">
      </div>
      <span class="cancel" @click="$router.back()">取消</span>
    </div>
    <div class="main">
      <div class="searchTags" v-show="isShow">
        <div class="historyTags" v-show="isShowHistory">
          <div class="title">
            <span class="text">历史记录</span>
            <i class="iconfont icon-shanchu" @click="deleteTags"></i>
          </div>
          <div class="historyTagsList">
            <div class="historyTagsItem" v-for="(historySearch,index) in historySearchList" :key="index" @click="clickSearch(historySearch)">{{historySearch}}</div>
          </div>
        </div>
        <div class="hotTags">
          <div class="title">
            <span class="text">热门搜索</span>
          </div>
          <div class="hotTagsList">
            <div class="hotTagsItem" v-for="(hotKeyword,index) in hotKeywordVOList" :key="index" @click="clickSearch(hotKeyword.keyword)">{{hotKeyword.keyword}}</div>
          </div>
        </div>
      </div>
      <div class="searchList" v-show="isShowList">
        <div class="searchItem" v-for="(keyword,index) in realtimeKeywordList" :key="index" @click="clickSearch(keyword)">
          <span class="text">{{keyword}}</span>
          <i class="iconfont icon-jinrujiantou"></i>
        </div>
      </div>

      <div class="goodsList" v-show="!isShow && !isShowList">
        <div class="listType">
          <div class="synthesis">综合</div>
          <div class="price">
            <span class="text">价格</span>
            <i class="iconfont icon-shangxia"></i>
          </div>
          <div class="classify">分类</div>
        </div>
        <div class="listContent">
          <div class="goodsItem" v-for="(directly) in directlyList" :key="directly.id">
            <div class="imgBox">
              <img class="goodsImg" :src="directly.listPicUrl" alt="">
            </div>
            <div class="goodsTitle">{{directly.name}}</div>
            <span class="price">￥{{directly.retailPrice}}</span>
          </div>
        </div>
      </div>  
    </div>
  </div>
</template>

<script>
import debounce from "lodash/debounce";
import {mapState} from 'vuex'
export default {
  name: 'Search',
  data(){
    return {
      isShow:true,
      isShowList:false,
      isShowHistory:false,
      searchKeyword:'',
      historySearchList:[]
    }
  },
  mounted(){
    this.getKeywordList()
    this.historySearchList = JSON.parse(localStorage.getItem('historySearchList_key')) || []
    this.historySearchList = [...new Set(this.historySearchList)];
    if(this.historySearchList && this.historySearchList[0]){
      this.isShowHistory = true
    }
  },
  methods:{
    getKeywordList(){
      this.$store.dispatch('getKeywordList')
    },

    collectKeyword: debounce(
      function(event){
        this.isShow = false
        this.isShowList = true,
        this.$store.dispatch('getRealtimeKeywordList',this.searchKeyword)
        if(!this.searchKeyword){
          this.isShow = true
        }
      },10,{ trailing: true }
    ),

    searchGoods(){
      if(this.searchKeyword){
        this.historySearchList.unshift(this.searchKeyword)
        this.historySearchList = [...new Set(this.historySearchList)];
        localStorage.setItem('historySearchList_key',JSON.stringify(this.historySearchList))
        this.$store.dispatch('getSearch',this.searchKeyword)
        this.isShow = false,
        this.isShowList = false
      }
    },

    clickSearch(keyword){
      this.historySearchList.unshift(keyword)
      this.historySearchList = [...new Set(this.historySearchList)];
      localStorage.setItem('historySearchList_key',JSON.stringify(this.historySearchList))
      this.$store.dispatch('getSearch',keyword)
      this.isShow = false,
      this.isShowList = false
    },

    deleteTags(){
      this.historySearchList = []
      localStorage.removeItem('historySearchList_key')
      this.isShow = true
      this.isShowList = false
      this.isShowHistory = false
    }
  },
  computed:{
    ...mapState({
      keywordList:state => state.search.keywordList,
      realtimeKeywordList: state => state.search.realtimeKeywordList,
      goodsInfo:state => state.search.goodsInfo

    }),

    hotKeywordVOList(){
      return this.keywordList.hotKeywordVOList || []
    },

    defaultKeyword(){
      return this.keywordList.defaultKeyword || {}
    },

    directlyList(){
      return this.goodsInfo.directlyList || []
    }
  },
}
</script>

<style lang="less" scoped>
  .searchContainer{
    .header{
      width: 100%;
      height: 44px;
      box-sizing: border-box;
      padding: 0 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .searchBox{
        width: 282px;
        height: 28px;
        padding: 0 10px;
        background-color: #F4F4F4;
        display: flex;
        align-items: center;
        border-radius: 3px;
        .iconfont{
          margin-right: 8px;
          font-size: 18px;
        }
        .search{
          width: 260px;
          height: 20px;
          border: none;
          background-color: #F4F4F4;
        }
      }
      .cancel{
        font-size: 14px;
      }
    }
    .main{
      .searchTags{
        .historyTags{
          width: 345.2px;
          padding: 15px;
          padding-top: 0;
          border-bottom: 10px solid #EEEEEE;
          .title{
            width: 100%;
            height: 45px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
            color: #999999;
          }
          .historyTagsList{
            display: flex;
            flex-wrap: wrap;
            .historyTagsItem{
              padding: 3px 8px;
              border: 1px solid #aaa;
              border-radius: 3px;
              font-size: 12px;
              margin-right: 18px;
              margin-top: 18px;
            }
          }
        }
        .hotTags{
          width: 345.2px;
          padding: 15px;
          padding-top: 0;
          .title{
            width: 100%;
            height: 45px;
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #999999;
          }
          .hotTagsList{
            display: flex;
            flex-wrap: wrap;
            .hotTagsItem{
              padding: 3px 8px;
              border: 1px solid #aaa;
              border-radius: 3px;
              font-size: 12px;
              margin-right: 18px;
              margin-top: 18px;
            }
          }
        }
      }
      .searchList{
        width: 360.2px;
        padding-left: 15px;
        .searchItem{
          width: 360.2px;
          height: 45px;
          // background-color: antiquewhite;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid #D9D9D9;
          .text{
            font-size: 14px;
            color: #333333;
          }
          .iconfont{
            font-size: 20px;
            font-weight: bold;
            color: #333333;
            margin-right: 15px;
          }
        }
        .searchItem:last-child{
          border-bottom: none !important;
        }
      }
      .goodsList{
        width: 100%;
        height: 500px;
        .listType{
          width: 100%;
          height: 40px;
          display: flex;
          border-bottom: 1px solid #D9D9D9;
          .synthesis{
            flex: 1;
            text-align: center;
            height: 40px;
            line-height: 40px;
            color: #DD1A21;
          }
          .price{
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #333333;
          }
          .classify{
            flex: 1;
            text-align: center;
            height: 40px;
            line-height: 40px;
            color: #333333;
          }
        }
        .listContent{
          display: flex;
          flex-wrap: wrap;
          padding: 10px;
          padding-right: 0;
          height: calc(100vh - 106px);
          overflow-y:scroll;
          .goodsItem{
            width: 50%;
            height: 255px;
            padding-right: 10px;
            box-sizing: border-box;
            margin-bottom: 20px;
            .imgBox{
              width: 100%;
              height: 172.5px;
              .goodsImg{
                width: 100%;
                height: 172.5px;
                margin-bottom: 8px;
                border-radius: 10px;
              }
            }
            .goodsTitle{
              font-size: 15px;
              margin-bottom: 3px;
            }
            .price{
              font-size: 20px;
              color: #FA1E32;
              font-weight: bold;
            }
          }
        }
      }
    }
  }
</style>
